<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn">
<head>
<title>Json with AJAX</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />
<script type="text/javascript" src="../library/jquery.js"></script>
<script type="text/javascript" src="../library/class.js"></script>
<script type="text/javascript" src="../library/plugin-tabs.js"></script>
<style type="text/css">
body {
	font:12px/1.5 Tahoma, Helvetica, Arial, \5FAE\8F6F\96C5\9ED1, \5b8b\4f53, \5FAE\8F6F\6B63\9ED1\4F53, sans-serif;
	color: #666;
	margin: 0;
	padding: 15px;
}
a {
	color: #0365BF; 
	text-decoration: none;
}
a:hover {
	color: #0099FF; 
	text-decoration: underline;
}
img, form, ul, h1, p{
	padding:0;
	margin:0;
	border:0;
}
ul {
	list-style-type:none;
}
table {
	width:800px;
	border-collapse:collapse;
	text-align:center;
	padding:0;
	margin:0;
	border:0;
}
table th,td {
	border:1px solid #aaa;
}
table caption {
	font-weight:bold;
	padding:6px 0px;
	color:#3d580b;
	font-size:25px;
}
table thead th {
	border-bottom:2px solid #3d580b;
	background-color:#8fc629;
	color:#fff;
	padding:5px 0px;
}
table foot {
	margin-top:-3px;
}

.clear {
	clear: both;
}
.left {
	float: left;
}
.right {
	float: right;
}

#nav {
	
}
#nav ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
#nav ul li {
	float: left;
	border-top: #A9D5F4 1px solid;
	border-left: #A9D5F4 1px solid;
	border-bottom: #A9D5F4 1px solid;
	width: 80px;
	line-height: 25px;
	text-align: center; 
}
#nav a {
	display: block;
	text-decoration: none;
}
#nav a:hover {
	background: #EFEFEF;
	color: #000;
}

#main {
	margin-top: 15px;
}

/*============EA_HS.JS=================*/
/*分页样式*/
.EA_Table-pageNav {
	padding:5px 0;
	line-height:25px;
	padding-left:10px;
}
.EA_Table-pageNav a:hover {
	background:#000; color:#fff;
}
.EA_Table-pageNav .total {
	background:#FFF;
	border:1px solid #E6E6E6;
	padding:3px 5px;
	color:#000;
}
.EA_Table-pageNav .current {
	background:#e90000;
	padding:4px 5px;
	color:#fff;
}
.EA_Table-pageNav .list {
	background:#FFF;
	border:1px solid #E6E6E6;
	padding:3px 5px;
	color:#000;
	text-decoration:none;
}
.EA_Table-pageNav .first,.EA_Table-pageNav .last {
	background:#FFF;
	border:1px solid #E6E6E6;
	padding:3px 5px;
	color:#AAA;
	text-decoration:none;
}


#EA_Tabs {
	border-bottom: 1px #99BBE8 solid;
	padding: 3px 0;
	TEXT-ALIGN: left;
	font-size: 12px;
}
#EA_Tabs span {
	padding: 5px 10px 4px 10px;
	margin-right:5px;
	cursor: pointer;
	color: #949290;
	border-top: 1px #99BBE8 solid;
	border-left: 1px #99BBE8 solid;
	border-right: 1px #99BBE8 solid;
}
#EA_Tabs span a{
	text-decoration: none;
	color: #949290;
}
#EA_Tabs .tabHover {
	background-color: #DEECFD;
	color: #7A8180;
}
#EA_Tabs .tabOn {
	background: #fff;
	color: #0066CC;
	font-weight: bold;
	border-top: 1px #99BBE8 solid;
	border-left: 1px #99BBE8 solid;
	border-right: 1px #99BBE8 solid;
}
</style>
</head>
<body>

<div id="nav">
	<ul>
		<li><a href="javascript:;" onclick="EAS_JS.Ajax.getHTML('./full.html', 'main');">Full</a></li>
		<li><a href="javascript:;" onclick="EAS_JS.Ajax.getHTML('./table.html', 'main');">Table</a></li>
		<li><a href="javascript:;" onclick="EAS_JS.Ajax.getHTML('./form.html', 'main');">Form</a></li>
		<li><a href="javascript:;" onclick="EAS_JS.Ajax.getHTML('./tabs.html', 'main');">Tabs</a></li>
		<li><a href="javascript:;" onclick="EAS_JS.Ajax.getHTML('./dialog.html', 'main');">Dialog</a></li>
		<li style="border-right: #A9D5F4 1px solid;"><a href="javascript:;" onclick="EAS_JS.Ajax.getHTML('./script.html', 'main');">Script</a></li>
	</ul>
	<div class="clear"></div>
</div>

<div id="main"></div>

<div id="test"></div>

<div id="test2"></div>

<input type="button" value="test" onclick="$('#test').empty();moduleLoad();" />

<script type="text/javascript">
//<![CDATA[
function batchLoad () {
	EAS_JS.Script
		.load({
			url : 'http://www.e-fw.com/javascript-load-optimization/api/js.php?sleep=5&box=test&num=1',
		})
		.load({
			url : 'http://www.e-fw.com/javascript-load-optimization/api/js.php?box=test&num=2',
		})
		.load({
			url : 'http://www.e-fw.com/javascript-load-optimization/api/js.php?sleep=2&box=test&num=3',
		})
		.load({
			url : 'http://www.e-fw.com/javascript-load-optimization/api/js.php?box=test&num=4',
		});
}

function moduleLoad () {
	EAS_JS.Script
		.build({
			name : 'jquery',
			url : 'http://www.e-fw.com/javascript-load-optimization/api/js.php?sleep=5&box=test&num=1'
		})
		.build({
			name : 'local',
			def : function () {
				$('#test').html($('#test').html() + '2-=>');
			}
		})
		.build({
			name : 'fsnanhu',
			url : 'http://www.e-fw.com/javascript-load-optimization/api/js.php?sleep=2&box=test&num=3'
		})
		.build({
			name : 'w2blog',
			url : 'http://www.e-fw.com/javascript-load-optimization/api/js.php?box=test&num=4'
		})
		.build({
			name : 'index',
			def : function () {
				$('#test').html($('#test').html() + '5-=>');
			},
			requires : ['jquery', 'local', 'fsnanhu', 'w2blog']
		});

	EAS_JS.Script.run({
		name : 'index'
	});
}

moduleLoad();
//]]>
</script>

</body>
</html>